import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';

window.onload = function () {

    const backColor = new Color("rgba(0,0,0,1)");

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);


    let u_m4 = gl.getUniformLocation(gl.program, 'u_m4');

    let poly = new Poly({
        gl: gl,
        vertices: [
            0, 0.1,
            -0.1, -0.1,
            0.1, -0.1,
        ]
    })


    const [bx, by] = [0.0, 0.0];
    const [cx, cy] = [0.0, 0.0];
    const bm = new Matrix4().set(
        1, 0, 0, bx,
        0, 1, 0, by,
        0, 0, 1, 0,
        0, 0, 0, 1,
    );
    const cm = new Matrix4().set(
        1, 0, 0, cx,
        0, 1, 0, cy,
        0, 0, 1, 0,
        0, 0, 0, 1,
    );
    //两矩阵相乘
    const dm = cm.multiply(bm);

    //第二种 分别变换
    const em = new Matrix4();
    em.makeScale(2.0, 2.0, 1.0);
    const fm = new Matrix4();
    fm.makeTranslation(2.0, 2.0, 0.0);


    //第三种 统一变换
    const zm = new Matrix4();

    const pos = new Vector3(0.3, 0.0, 0.0);
    const rot = new Quaternion();
    rot.setFromAxisAngle(new Vector3(0, 0, 0), Math.PI / 2);
    const scale = new Vector3(1, 1, 1);

    zm.compose(pos, rot, scale);


    gl.uniformMatrix4fv(u_m4, false, (zm).elements);
    poly.draw(["TRIANGLES"]);






}